<template>
    <div class="message">
        <div class="search">
            <el-input v-model="inputUsername" placeholder="请输入名字"></el-input>
            <PCSelectDate class="expansion" v-if="!PCTableShow"></PCSelectDate>
            <PhoneSelectDate v-if="PCTableShow" />
            <el-button type="primary" @click="getInputData">搜索</el-button>
        </div>

        <el-row>
            <el-button type="primary"  @click="handleDialogVisible" size="mini">新增</el-button>
            <el-button type="danger" @click="handleDeleteBatch" size="mini">批量删除</el-button>
            <!-- 新增弹窗 -->
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                :width="manage.width"
                >
                <!-- 内容 -->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名称">
                        <el-input v-model="form.uName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系手机">
                        <el-input v-model="form.uPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="用户等级">
                        <el-select v-model="form.uGrade" placeholder="请选择用户等级">
                            <el-option label="1" value="1"></el-option>
                            <el-option label="2" value="2"></el-option>
                            <el-option label="3" value="3"></el-option>
                            <el-option label="4" value="4"></el-option>
                            <el-option label="5" value="5"></el-option>
                            <el-option label="6" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="点赞数">
                        <el-input v-model="form.uPraise"></el-input>
                    </el-form-item>
                    <el-form-item label="食物类型">
                        <el-checkbox-group v-model="uFavoriteTypeString">
                            <el-checkbox label="肉类" name="meat"></el-checkbox>
                            <el-checkbox label="蔬菜" name="vegetable"></el-checkbox>
                            <el-checkbox label="辣" name="spicy"></el-checkbox>
                            <el-checkbox label="煎" name="decoct"></el-checkbox>
                            <el-checkbox label="炒" name="fry"></el-checkbox>
                            <el-checkbox label="甜" name="sweet"></el-checkbox>
                            <el-checkbox label="苦" name="hard"></el-checkbox>
                            <el-checkbox label="酸" name="sour"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="投诉数">
                        <el-input v-model="form.uComplaint"></el-input>
                    </el-form-item>
                    <el-form-item label="评论权限">
                        <el-switch v-model="uAuthorityString"></el-switch>
                    </el-form-item>
                    <el-form-item label="头像">
                        <HeadUpload v-model="form.uAvatar" :action="action" :uAvatar="form.uAvatar" :tempAvatar="tempAvatar" @headImgUrl="headImgUrl" ref="headupload" />
                    </el-form-item>
                </el-form>
                
                <!-- 操作 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>

        <el-table
            @selection-change="handleSelectionChange"
            ref="multipleTable"
            :data="userData"
            tooltip-effect="dark"
            style="width: 100%"
            stripe
            border
            >
            <el-table-column type="expand" key="tableColumn" v-if="PCTableShow">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="用户 ID:">
                            <span>{{ props.row.uId }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="用户名称:">
                            <span>{{ props.row.uName }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="用户头像:">
                            <img style="width:100px;height:100px;" v-if="props.row.uAvatar !== undefined && props.row.uAvatar !==''" :src="props.row.uAvatar" alt="用户头像">
                        </el-form-item>
                        <br>
                        <el-form-item label="用户联系方式:">
                            <span>{{ props.row.uPhone }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="用户等级:">
                            <span>{{ props.row.uGrade }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="点赞数:">
                            <span>{{ props.row.uPraise }}</span>
                        </el-form-item>
                        <br>
                        <el-form-item label="用户喜欢的食物类型:">
                            <span>{{ props.row.uFavoriteType }}</span>
                        </el-form-item>
                        <el-form-item label="投诉数:">
                            <span>{{ props.row.uComplaint }}</span>
                        </el-form-item>
                        <el-form-item label="评论权限:">
                            <span>{{ props.row.uAuthority }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间:">
                            <span>{{ props.row.uCreatetime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnId" label="用户 ID" v-if="tableShow === false ? 0 : 1" prop="uId"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnName" label="用户名称" prop="uName"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnAvatar" v-if="tableShow === false ? 0 : 1" label="虚拟形象" >
                <template slot-scope="pc_props">
                    <img v-if="pc_props.row.uAvatar !== undefined && pc_props.row.uAvatar !==''" :src="pc_props.row.uAvatar" style="width:100px;height:100px;" alt="用户头像">
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnPhone" v-if="tableShow === false ? 0 : 1" label="联系手机" prop="uPhone"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnGrade" v-if="tableShow === false ? 0 : 1" label="用户等级" prop="uGrade"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnPraise" v-if="tableShow === false ? 0 : 1" label="点赞数" prop="uPraise"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnFavoriteType" v-if="tableShow === false ? 0 : 1" label="食物类型" prop="uFavoriteType"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnComplaint" v-if="tableShow === false ? 0 : 1" label="投诉数" prop="uComplaint"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnAuthority" v-if="tableShow === false ? 0 : 1" label="评论权限" prop="uAuthority"></el-table-column>
            <el-table-column show-overflow-tooltip key="tableColumnCreatetime" v-if="tableShow === false ? 0 : 1" label="创建时间" prop="uCreatetime"></el-table-column>

            <el-table-column label="操作" width="144">
                <template slot-scope="scope">
                    <div class="btnEditDel">
                        <el-button class="btnEdit" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- <br class="btnEditDelMid" v-show="PCTableShow"> -->
                        <el-button class="btnDel" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <PCPage :pageNum="pageNum" :pageSize="pageSize" :total="total"/>
            <PhonePage :pageNum="pageNum" :pageSize="pageSize" :total="total" />
        </div>
        
    </div>
</template>


<script>
import PCSelectDate from '@/components/slot/SelectTime/PCSelectDate'
import PhoneSelectDate from '@/components/slot/SelectTime/PhoneSelectDate'
import PCPage from '@/components/slot/SelectPage/PCPage'
import PhonePage from '@/components/slot/SelectPage/PhonePage'
import HeadUpload from '@/components/slot/headUpload/'
import {mapState,mapMutations} from 'vuex'
import {getPageUser,intUpdUser,delUserId,delUsers} from '@/api'
export default {
    name: "ManageAdmin",
    components:{
        PCSelectDate,
        PhoneSelectDate,
        PCPage,
        PhonePage,
        HeadUpload
    },
    computed:{
        ...mapState('Public',['publicWidth','manage']),
        ...mapState('TempData',['tempTableData'])
    },
    data() 
    {
        return {
            userData:[],
            PCTableShow:false,
            tableShow:false,
            inputUsername:'',

            //弹窗
            dialogVisible: false,

            //传递头像服务器地址
            action:"/bs/user/upload",

            //新增
            form: {
                uName: '',
                uPhone: '',
                uGrade: '',
                uPraise: 0,
                uFavoriteType: '',
                uComplaint: 0,
                uAuthority: 0,
                uAvatar:''
            },
            //修改数据补助变量
            uFavoriteTypeString: [],
            uAuthorityString: true,
            tempAvatar:'',

            //批量删除
            delBatchData: [],

            /**
             * 查询
             */
            //分页
            pageNum: 1,
            pageSize: 5,
            total: 0,
            //时间
            previousTime: '',
            futureTime: ''
        }
    },
    watch:{
        /**
         * 改变PC和移动端的表格
         */
        publicWidth()
        {
            this.EidtWindow()
        }
    },
    created() 
    {
        // 查询数据
        this.getList()
        /**
         * 改变PC和移动端的表格
         */
        this.EidtpublicWidth(document.body.clientWidth)
        this.EidtWindow()
    },
    methods: {
        /**
         * Element-ui源代码
         */
        toggleSelection(rows) 
        {
            if (rows) 
            {
                rows.forEach((row) => {
                this.$refs.multipleTable.toggleRowSelection(row);
                });
            } 
            else 
            {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) 
        {
            this.multipleSelection = val;
        },

        /**
         * EidtpublicWidth:更改窗口大小
         */
        ...mapMutations('Public',['EidtpublicWidth']),

        /**
         * 改变PC和移动端的表格
         */
        EidtWindow()
        {
            if(this.publicWidth <= 540)
            {
                this.PCTableShow = true
                this.tableShow = false
            }
            else
            {
                this.PCTableShow = false
                this.tableShow = true
            }   
        },
        //弹窗
        handleDialogVisible()
        {
            this.dialogVisible = true
            this.tempAvatar = 'insert'
        },
        //获取子组件的头像
        headImgUrl(val)
        {
            this.form.uAvatar = val
            // console.log('收到的头像',val);
        },

        /**
         * 操作数据
         */
        getInputData()
        {
            this.getList()
        },
        //修改数据
        handleEdit(index, row) 
        {
            this.dialogVisible = true
            if(row !== undefined)
            {
                this.tempAvatar = 'update'
                //展示原始数据
                this.form = row 
                if(row.uFavoriteType !== undefined && row.uFavoriteType ==='')
                    this.uFavoriteTypeString = row.uFavoriteType.split(",") //还原前端form多选数据
                this.uAuthorityString = row.uAuthority === 1 ? true : false //还原前端选择器数据
                //调用子组件方法，搭配props传值防止第一次点击找不到报红
                if(this.$refs['headupload'] !== undefined)
                    this.$refs['headupload'].handleImgUrl(row.uAvatar)
            }
            else
            this.tempAvatar = 'insert'
            console.log(index, row);
        },
        //调用后台删除数据
        handleDelete(index, row) 
        {
            console.log(index, row);
            delUserId(row.uId)  //调用接口删除数据
            this.getList()
        },
        //获取选择器选中的所有数据
        handleSelectionChange(val)
        {
            // 扁平化处理，将对象数组变普通数组
            this.delBatchData = val.map(v => v.uId)
        },
        //调用后台删除
        handleDeleteBatch()
        {
            let res = delUsers(this.delBatchData)
            if(res)
            {
                alert('批量删除成功')
                this.getList()
            }
            else
                alert('批量删除失败')
            
        },
        //调用后台更新
        save()
        {
            this.dialogVisible = false
            this.form.uFavoriteType = this.uFavoriteTypeString.toString()  //转格式后存进数据库
            this.form.uAuthority = this.uAuthorityString === false ? 0 : 1 //转格式后存进数据库
            intUpdUser(this.form) //调用接口更新数据
            this.getList()
        },

        /**
         * 查询数据
         */
        getList(pageSize,pageNum)
        {
            //查询分页
            getPageUser({
                pageNum: pageNum === undefined ? this.pageNum : pageNum,
                pageSize: pageSize === undefined ? this.pageSize : pageSize,
                name: this.inputUsername,
                previousTime: this.previousTime,
                futureTime: this.futureTime,
            }).then(res => {
                this.userData = res.users
                this.total = res.total
                // console.log('输出',res.users);
            }).catch(err =>{
                console.log(err);
            })
        },
        //被子组件调用的分页查询
        callPage(pageNum,pageSize)
        {
            this.getList(pageSize,pageNum)
        },
        //被子组件调用的时间选择
        callDate(val)
        {
            this.previousTime = val[0]
            this.futureTime = val[1]
        },
    }
}
</script>

<style lang="less" scoped>
    .demo-table-expand {
        font-size: 0;
        padding: 0 5px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        border-bottom: 1px dashed #ebebeb;
        width: 100%;
    }
    .message
    {
        .el-row
        {
            padding: 0 0 10px 0;
        }
    }
    .search
    {
        display: flex;
        padding: 0 0 10px 0;
        .el-input
        {
            width: 200px;
        }
        .expansion
        {
            margin: 0 10px;
        }
    }
    .page
    {
        padding: 10px 0;
    }


    @media all and (max-width: 540px)
    {
        .search
        {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .el-date-picker
            {
                width: 100%;
            }
            .el-input
            {
                width: 100% !important;
            }
            .el-button
            {
                width: 100%;
            }
        }
    }
</style>